<template>

      <el-row>
        <el-col :span="12" style="margin-top:15px" >
          <el-image src="/src/assets/ad.png"/>
        </el-col>
        <el-col :span="12">
          <el-form  class="loginForm">
            <h1>用户登录</h1>
            <el-form-item >
              <el-input prefix-icon="User" placeholder="请输入用户名" v-model="userinfo.username"/>
            </el-form-item>
            <el-form-item >
              <el-input type="password" prefix-icon="Key" placeholder="请输入密码" v-model="userinfo.password"/>
            </el-form-item>
            <el-form-item>
              <el-input style="width: 170px; margin-right: 5px" v-model="userinfo.captchaInput" placeholder="请输入验证码" />
              <el-image :src="imageBase64Data" @click="getCatecha" />
            </el-form-item>
            <el-form-item >
              <el-button type="primary" class="regBtn" @click="login">登录</el-button>
              <el-button class="regBtn">注册</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
</template>

<script setup>

import userApi from "@/api/userApi.js";
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import {useTokenStore} from "@/stores/token.js";
import {useUserStore} from "@/stores/User.js";

const userStr=useUserStore();
const tokenStr=useTokenStore();
const  router=useRouter();
const imageBase64Data =ref(null)

// const captcha=ref("");
//用户注册信息
const userinfo = ref({
  username:'',
  password:'',
  key:'',
  captchaInput:''
})
function getCatecha(){
  userApi.captcha()
      .then(resp => {
        userinfo.value.key=resp.data.key
        imageBase64Data.value=resp.data.imageBase64Data
      })
}
//用户注册
function login(){
  userApi.login(userinfo.value)
      .then(resp => {
        if (resp.code === 10000){
          ElMessage.success(resp.msg)
          //跳转到前台首页
          tokenStr.update(resp.data);
          //
          getInfo();
          router.push("/user/index")
        }else {
          ElMessage.error(resp.msg)

        }
      })

}
//获取用户信息的方法
function getInfo(){
  userApi.getInfo()
      .then(resp =>{
        //将已登录用户的信息保存到pinia中
        if(resp.code == 10000){
          userStr.update(resp.data)
        }
      })
}

getCatecha();
</script>
<style scoped>
.el-row {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none; /* 移除边框 */
  margin: 100px auto; /* 调整外边距 */
  width: 100%; /* 宽度设为100%，但内容会居中 */
  max-width: 1200px; /* 最大宽度限制 */
  height: auto; /* 高度自适应 */
  /* 修改背景色为线性渐变 */
  background: linear-gradient(to right, #ffffff, var(--theme-color)); /* 从左到右的渐变，从#f0f2f5到#c0c4cc */
  padding: 20px; /* 添加内边距 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  border-radius: 10px; /* 添加圆角 */
}

.el-col {
  padding: 0; /* 移除列的内边距 */
}

.el-image {
  max-width: 100%; /* 图片最大宽度限制 */
  height: auto; /* 高度自适应 */
  border-radius: 10px; /* 添加圆角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

.loginForm {
  width: 100%; /* 宽度设为100%，但在父容器中会受限制 */
  max-width: 400px; /* 最大宽度限制 */
  margin: 0 auto; /* 水平居中 */
  padding: 30px; /* 增加内边距 */
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  background: #ffffff; /* 白色背景 */
  color: #333333; /* 字体颜色 */
  font-family: 'Arial', sans-serif;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加过渡效果 */
}

.loginForm:hover {
  transform: translateY(-10px); /* 悬停时向上移动 */
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); /* 悬停时增加阴影 */
}

.loginForm h1 {
  text-align: center;
  margin-bottom: 25px;
  font-size: 28px;
  font-weight: bold;
  color: #ff7e5f; /* 标题颜色 */
}

.el-form-item {
  margin-bottom: 25px;
}

.el-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #e0e0e0; /* 添加边框 */
  border-radius: 8px;
  box-shadow: none; /* 移除阴影 */
  background-color: #f9f9f9; /* 浅灰色背景 */
  color: #333333; /* 字体颜色 */
  transition: border-color 0.3s ease, box-shadow 0.3s ease; /* 添加过渡效果 */
}

.el-input:focus {
  border-color: #ff7e5f; /* 聚焦时边框颜色变化 */
  box-shadow: 0 0 8px rgba(255, 126, 95, 0.3); /* 聚焦时添加阴影 */
}

.el-input::placeholder {
  color: #999999; /* 占位符颜色 */
}

.el-button {
  width: 45%; /* 宽度设为100% */
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease; /* 添加过渡效果 */
}

.el-button.regBtn:first-of-type {
  background-color: #ff7e5f; /* 登录按钮颜色 */
  color: #ffffff; /* 字体颜色 */
}

.el-button.regBtn:first-of-type:hover {
  background-color: #feb47b; /* 悬停时颜色变化 */
  transform: scale(1.05); /* 悬停时放大 */
}

.el-button.regBtn:last-of-type {
  background-color: #e0e0e0; /* 注册按钮颜色 */
  color: #333333; /* 字体颜色 */
}

.el-button.regBtn:last-of-type:hover {
  background-color: #cccccc; /* 悬停时颜色变化 */
}

/* 验证码图片样式调整 */
.el-form-item label + .el-input-group {
  display: flex;
  align-items: center;
}

.el-form-item label + .el-input-group .el-image {
  margin-left: 10px;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
}
</style>